<template>
  <div
    class="w-full max-w-md p-6 bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-shadow"
  >
    <h3 class="text-xl font-bold text-primary dark:text-secondary mb-2">示例卡片</h3>
    <p class="text-gray-600 dark:text-gray-300 mb-4">
      这是一个使用 Tailwind CSS 样式的卡片，支持深色/浅色模式自动切换。
    </p>
    <button
      @click="handleClick"
      class="px-4 py-2 bg-primary dark:bg-secondary text-white rounded-lg hover:opacity-90 transition-opacity"
    >
      点击按钮
    </button>
  </div>
</template>

<script setup lang="ts">
const handleClick = () => {
  alert('卡片按钮被点击！')
}
</script>
